<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 33px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <!--表单-->
      <el-card class="box-card" v-if="showType=='job'">
        <div slot="header" class="clearfix">
          <span>作业列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation/>
        </div>
        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="id"
          @select="crud.selectChange"
          @select-all="crud.selectAllChange"
          @selection-change="crud.selectionChangeHandler"
          @filter-change="crud.handleFilterChange"
          :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }"
          @row-dblclick="goTaskInfo"
          border
          stripe
        >
          <el-table-column v-if="columns.visible('jobCode')" :show-overflow-tooltip="true" label="作业编码" min-width="150"
                           prop="jobCode"/>
          <el-table-column v-if="columns.visible('jobName')" :show-overflow-tooltip="true" label="作业名称" min-width="150"
                           prop="jobName"/>
          <el-table-column v-if="columns.visible('appCode')" :show-overflow-tooltip="true" label="应用编码" align="center"
                           prop="appCode"/>
          <el-table-column v-if="columns.visible('jobPeriod')" prop="jobPeriod" label="调度间隔 " align="center"
                           min-width="100" key="jobPeriod"
                           :filters="jobPeriodStatusDict"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="jobPeriod">
            <template slot-scope="scope">
              {{ jobPeriodFormatter(scope.row.jobPeriod) }}
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('dateExpression')" :show-overflow-tooltip="true" label="日期表达式"
                           prop="dateExpression"/>
          <el-table-column v-if="columns.visible('sortNo')" :show-overflow-tooltip="true" label="优先级" prop="sortNo"/>
          <el-table-column v-if="columns.visible('offsetHour')" :show-overflow-tooltip="true" label="偏移小时"
                           prop="offsetHour"/>
          <el-table-column v-if="columns.visible('jobStatus')" prop="jobStatus" label="状态 "
                           :formatter="jobStatusFormatter" min-width="80"
                           :filters="jobDefStatusDict" key="jobStatus"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="jobStatus">
            <template slot-scope="scope">
              <el-tag size="small" :type="jobStatusFormatterType(scope.row.jobStatus)" style="width:60px;">
                {{ jobStatusFormatter(scope.row.jobStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('crtTs')" min-width="140" :show-overflow-tooltip="true" label="创建时间"
                           prop="crtTs">
            <template slot-scope="scope">
              <!-- 悬浮提示 -->
              <el-tooltip
                placement="bottom-end"
                v-model="scope.row.showTooltip"
                :open-delay="500"
                effect="light"
                :disabled="!scope.row.showTooltip"
              >
                <!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
                <div slot="content">双击当前行点开详情</div>
                <div>
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.upTs }}</span>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 作业详情 start -->
      <el-card class="box-card" style="padding-bottom: 30px" v-if="showType=='task'">
        <div slot="header" class="clearfix">
          <div class="el-page-header">
            <div class="el-page-header__left" @click="goBack">
              <i class="el-icon-back"></i>
              <div class="el-page-header__title">返回</div>
            </div>
            <div class="el-page-header__content">周期作业详情</div>
          </div>
        </div>
        <div class="task-infor">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="任务列表" name="first">
              <el-table ref="taskTable" :data="taskDataList" v-loading="crud.loading"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                        row-key="id"
                        :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
                <el-table-column min-width="120" prop="taskCode" :show-overflow-tooltip="true" label="任务编号"/>
                <el-table-column min-width="120" prop="taskName" :show-overflow-tooltip="true" label="任务名称">
                </el-table-column>
                <el-table-column min-width="120" prop="shellPath" :show-overflow-tooltip="true" label="脚本路径">
                </el-table-column>
                <el-table-column min-width="100" prop="extParam" :show-overflow-tooltip="true" label="外部参数">
                </el-table-column>
                <el-table-column min-width="80" prop="priorityLevel" label="优先级">
                </el-table-column>
                <el-table-column prop="resNum" label="资源数" min-width="100">
                </el-table-column>
                <el-table-column prop="isOrder" label="是否顺序执行" min-width="100" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.isOrder == 1" type="success">是</el-tag>
                    <el-tag v-if="scope.row.isOrder == 2" type="info">否</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <el-tab-pane label="作业详情" name="second">
              <span slot="label">作业详情</span>
              <el-form
                ref="jobForm"
                :inline="true"
                label-position="left"
                :model="jobForm"
                :rules="rules"
                label-width="240px"
              >
                <el-col
                  :span="24"
                  style="padding: 30px;min-height: 360px"
                >
                  <div>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业编码" prop="jobCode">
                          <el-input v-model="jobForm.jobCode" style="width: 350px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一编码，大写英文字母与数字组成，不能为大小写混合不能多于12个字符串
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业名称" prop="jobName">
                          <el-input v-model="jobForm.jobName" style="width: 350px" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            唯一名称，作业名称不多于12位
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="调度间隔" prop="jobPeriod">
                          <el-select v-model="jobForm.jobPeriod" style="width: 350px" disabled>
                            <el-option
                              v-for="item in this.dict.cycle_job_period"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            频率（D:日 W:周 M:月 Q:季度 X:旬 Y:年 O:自定义）
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="日期表达式" prop="dateExpression" style="width:186%">
                          <el-input style="width: 350px" v-if="jobForm.jobPeriod =='D'" v-model="jobForm.dateExpression"
                                    :disabled="true"/>
                          <el-input-number style="width: 260px" v-if="jobForm.jobPeriod =='W'"
                                           v-model="jobForm.dateExpression" :min="0" :max="6"
                                           :disabled="true"></el-input-number>
                          <el-input-number style="width: 260px" v-if="jobForm.jobPeriod =='X'"
                                           v-model="jobForm.dateExpression" :min="-30" :max="30"
                                           :disabled="true"></el-input-number>
                          <el-input-number style="width: 260px" v-if="jobForm.jobPeriod =='M'"
                                           v-model="jobForm.dateExpression" :min="-30" :max="30"
                                           :disabled="true"></el-input-number>
                          <el-input-number style="width: 260px" v-if="jobForm.jobPeriod =='Q'"
                                           v-model="jobForm.dateExpression" :min="-30" :max="30"
                                           :disabled="true"></el-input-number>
                          <el-input-number style="width: 260px" v-if="jobForm.jobPeriod =='Y'"
                                           v-model="jobForm.dateExpression" :min="-365" :max="365"
                                           :disabled="true"></el-input-number>
                          <el-input style="width: 500px" v-if="jobForm.jobPeriod =='O'" v-model="jobForm.dateExpression"
                                    placeholder="* * *" :disabled="true"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业的周期开始时间表达式。
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="优先级" prop="sortNo">
                          <el-select v-model="jobForm.sortNo" placeholder="请选择" disabled style="width: 350px">
                            <el-option v-for="item in this.dict.priority_level" :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            优先级数值越大，优先执行
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="是否工作日执行" prop="isWorkRun">
                          <el-switch
                            v-model="jobForm.isWorkRun"
                            active-value="1"
                            inactive-value="0" disabled>
                          </el-switch>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            是否根据设置作业工作日执行
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="偏移小时" prop="offsetHour">
                          <el-input-number v-model="jobForm.offsetHour" :disabled="true" :min="0" :max="60"
                                           style="width: 260px"/>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业执行之前会根据偏移时间向后延迟一段时间再执行。
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="设置生效日期" prop="isValidDate">
                          <el-switch
                            v-model="jobForm.isValidDate"
                            active-value="1"
                            inactive-value="2" disabled>
                          </el-switch>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            允许作业定义晚生成作业实例的时间
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-collapse-transition>
                      <el-row v-if="jobForm.isValidDate == 1">
                        <el-col :span="15">
                          <el-form-item label="日期区间" prop="dateRange">
                            <el-date-picker
                              v-model="jobForm.dateRange"
                              type="daterange"
                              align="right"
                              unlink-panels
                              disabled
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              value-format="yyyy-MM-dd" style="width: 350px">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                        <el-col :span="9" class="data_from_el-col">
                          <div class="hex-form-inf">
                            <div class="hex-form-inf-content">
                              是否设置作业的有效期限
                            </div>
                            <i
                              class="el-icon-info hex-form-inf-icon"
                              @click="onOperInf($event)"
                              data-status="off"
                            ></i>
                          </div>
                        </el-col>
                      </el-row>
                    </el-collapse-transition>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="指定节点名称" prop="appointAgentCode">
                          <el-select v-model="jobForm.appointAgentCode" disabled clearable placeholder="请选择"
                                     style="width: 350px">
                            <el-option
                              v-for="item in agentCodeOption"
                              :key="item.agentCode"
                              :label="item.agentName"
                              :value="item.agentCode">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            指定作业在哪个节点服务器上执行。
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="作业状态" prop="jobStatus">
                          <el-select v-model="jobForm.jobStatus" disabled style="width: 350px">
                            <el-option
                              v-for="item in this.dict.job_def_status"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            状态（未发布 启用 停用）
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="15">
                        <el-form-item label="描述" prop="jobDesc">
                          <el-input type="textarea" :rows="2"
                                    placeholder="请输入内容"
                                    v-model="jobForm.jobDesc" :disabled="true" style="width: 350px">
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9" class="data_from_el-col">
                        <div class="hex-form-inf">
                          <div class="hex-form-inf-content">
                            作业的描述，不可超过60个字。
                          </div>
                          <i
                            class="el-icon-info hex-form-inf-icon"
                            @click="onOperInf($event)"
                            data-status="off"
                          ></i>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="任务依赖图" name="four">
              <taskDepend :jobCode="jobCode" :bizDate="bizDate" :type="dependTaskType" ref="taskDepend"/>
            </el-tab-pane>
            <el-tab-pane label="任务执行统计" name="five">
              <!-- <taskEchars :jobCode="this.jobCode"/>-->
              <cyclejobDefEchars :jobCode="this.jobCode"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
      <!-- 作业详情 end -->
    </div>
  </div>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {mapGetters} from 'vuex'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/cycleTask/cycleJobDef/admin/CRUD.operation'
import jobDef from '@/api/cycleJob/job_def'
import taskDef from '@/api/cycleJob/task'
import taskDepend from "../../components/taskDepend";
import taskEchars from './taskEchars'
import cyclejobDefEchars from '../../components/cyclejobDefEchars'

// crud交由presenter持有
const queryList = [
  {'cloumValue': 'jobCodeFuzzy', 'cloumName': '作业编码'},
  {'cloumValue': 'jobNameFuzzy', 'cloumName': '作业名称'},
  {'cloumValue': 'appCode', 'cloumName': '应用编码'}]
const defaultCrud = CRUD({
    title: '周期作业定义',
    url: 'api/jobDef',
    queryList: queryList,
    crudMethod: {...jobDef}
  }
)
const defaultForm = {}
export default {
  name: 'jobDef',
  components: {
    taskDepend, crudOperation, taskEchars, cyclejobDefEchars
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['job_def_status', 'cycle_job_period', 'priority_level'],
  data() {
    return {
      menus: [],
      jobCode: null,
      showType: 'job',
      dependTaskType: 'taskDef',
      bizDate: null,
      activeName: 'second',
      rules: {},
      taskForm: {
        pkId: null,
        jobCode: null,
        taskCode: '',
        taskName: '',
        shellPath: '',
        shellParam: '',
        priorityLevel: '1',
        allowErrCount: 0,
        isEndTask: '2',
        isOrder: '1',
        resNum: 5,
        planExecDuration: 0,
        overPlanDuration: 0,
        errDifferDuration: 0,
        appointAgentCode: null
        ,
        dependJobCodeList: [],
        dependTaskCodeList: []
      },
      agentCodeOption: [],
      jobList: [],
      taskList: [],
      taskDataList: [],
      taskName: '',
      jobForm: {},
      flag: false,
      cacheObj: {
        jobCode: ''
      },
      graphForm: {
        id: '',
        name: ''
      },
      showDetail: false,
      taskColumn: {},
      uploadErrorData: null,
      uploadForm: {batchTag: null},
      downLoadLoading: '',
      jobDefStatusDict: [],
      jobDefDict: [],
      jobPeriodDict: [],
      jobPeriodStatusDict: [],
    }
  },
  created() {
    this.crud.optPageShow.listPage = true;
    this.crud.optPageShow.addPage = false;
    this.jobDefDict = this.dict.job_def_status;
    this.jobPeriodDict = this.dict.cycle_job_period;
  },
  watch: {
    'activeName': function (val) { //监听切换状态-计划单
      if ("four" === val) {
        //this.$refs.taskDepend.setGraphData();
      }
    },
    jobDefDict() {
      this.$nextTick(() => {
        this.jobDefDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.jobDefStatusDict.push(obj)
        })
      })
    },
    jobPeriodDict() {
      this.$nextTick(() => {
        this.jobPeriodDict.forEach(item => {
          // debugger 前端调试工具
          var obj = {
            text: item.label,
            value: item.value
          }
          this.jobPeriodStatusDict.push(obj)
        })
      })
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  methods: {
    handleClick(tab, event) {
      // if(tab.name=="four"){
      //   this.$refs.taskDepend.setGraphData()
      // }
    },
    jobPeriodFormatter(val) {
      return this.dict.label.cycle_job_period[val]
    },
    jobStatusFormatter(val) {
      return this.dict.label.job_def_status[val]
    },
    jobStatusFormatterType(val) {
      const type = ['primary', 'success', 'info', 'warning', 'danger']
      return type[val]
    },
    goTaskInfo(row, column, event) {
      this.showType = 'task';
      this.activeName = 'first';
      this.jobCode = row.jobCode;
      this.queryTaskList(row.jobCode)
      this.qryJobDefByJobCode(row.jobCode);
    },
    qryJobDefByJobCode(jobCode) {
      jobDef.qryJobDefByJobCode(jobCode)
        .then(res => {
          this.jobForm = res;
          this.jobForm.sortNo = this.jobForm.sortNo + '';
          if (this.jobForm.jobStDate != null && this.jobForm.jobStDate != '' && this.jobForm.jobEndDate != null
            && this.jobForm.jobEndDate != '') {
            this.$set(this.jobForm, 'dateRange', [this.jobForm.jobStDate, this.jobForm.jobEndDate]);
          }
        });
    },
    goBack() {
      this.showType = 'job';
      this.showDetail = false;
      this.crud.refresh();
    },
    //根据作业编号 查询任务列表
    queryTaskList(param) {
      jobDef.queryTaskList(param).then(res => {
        if (res) {
          this.taskDataList = res;
        }
      })
    },
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
  }
}
</script>
